<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 设计稿演示 - 所有页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 1600px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 15px;
            padding: 15px 0;
        }
        .header h1 {
            font-size: 36px;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .header p {
            font-size: 16px;
            opacity: 0.9;
        }
        .filter-bar {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        .filter-btn {
            padding: 8px 16px;
            background: rgba(255,255,255,0.2);
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 20px;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .filter-btn:hover, .filter-btn.active {
            background: rgba(255,255,255,0.3);
            border-color: rgba(255,255,255,0.5);
            transform: translateY(-2px);
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        .image-card {
            background: rgba(255,255,255,0.95);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            transition: transform 0.3s, box-shadow 0.3s;
            color: #333;
        }
        .image-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 50px rgba(0,0,0,0.3);
        }
        .image-header {
            padding: 15px 20px;
            background: linear-gradient(135deg, #2b8a6e 0%, #256a60 100%);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .image-header h2 {
            font-size: 18px;
            font-weight: 600;
        }
        .image-header .frame-num {
            font-size: 14px;
            opacity: 0.9;
            background: rgba(255,255,255,0.2);
            padding: 4px 12px;
            border-radius: 12px;
        }
        .image-wrapper {
            position: relative;
            width: 100%;
            background: #f5f5f5;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .image-wrapper img {
            max-width: 100%;
            height: auto;
            display: block;
            cursor: zoom-in;
            transition: transform 0.3s;
        }
        .image-wrapper:hover img {
            transform: scale(1.05);
        }
        .image-actions {
            padding: 15px 20px;
            background: #f9f9f9;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .action-btn {
            padding: 8px 16px;
            background: #2b8a6e;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .action-btn:hover {
            background: #256a60;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(43,138,110,0.3);
        }
        .action-btn.secondary {
            background: #6b7280;
        }
        .action-btn.secondary:hover {
            background: #4b5563;
        }
        .stats {
            text-align: center;
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            margin-bottom: 10px;
            backdrop-filter: blur(10px);
        }
        .stats-content {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        .stat-item {
            text-align: center;
        }
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            display: block;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.8;
            margin-top: 5px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            cursor: zoom-out;
        }
        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 95%;
            max-height: 95%;
        }
        .modal-content img {
            max-width: 100%;
            max-height: 95vh;
            object-fit: contain;
        }
        .close-modal {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        .close-modal:hover {
            opacity: 0.7;
        }
        @media (max-width: 768px) {
            .image-grid {
                grid-template-columns: 1fr;
            }
            .filter-bar {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎨 平台设计稿演示</h1>
            <p>视化配置平台 - 所有功能页面预览</p>
        </div>

        <div class="stats">
            <div class="stats-content">
                <div class="stat-item">
                    <span class="stat-number">24</span>
                    <div class="stat-label">功能页面</div>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="displayed-count">24</span>
                    <div class="stat-label">当前显示</div>
                </div>
            </div>
        </div>

        <div class="filter-bar">
            <button class="filter-btn active" onclick="filterImages('all')">全部</button>
            <button class="filter-btn" onclick="filterImages('config')">配置相关</button>
            <button class="filter-btn" onclick="filterImages('plot')">绘图设置</button>
            <button class="filter-btn" onclick="filterImages('dialog')">对话框</button>
            <button class="filter-btn" onclick="filterImages('other')">其他</button>
        </div>

        <div class="image-grid" id="image-grid">
            <!-- Frame 8: 细胞类型配置 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>细胞类型配置</h2>
                    <span class="frame-num">Frame 8</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 8.png" alt="细胞类型配置" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 8.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 8.png', 'Frame8-细胞类型配置')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 10: 仿真配置-通用 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-通用</h2>
                    <span class="frame-num">Frame 10</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 10.png" alt="仿真配置-通用" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 10.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 10.png', 'Frame10-仿真配置-通用')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 13: 绘图设置-光栅图 -->
            <div class="image-card" data-category="plot">
                <div class="image-header">
                    <h2>绘图设置-光栅图</h2>
                    <span class="frame-num">Frame 13</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 13.png" alt="绘图设置-光栅图" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 13.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 13.png', 'Frame13-绘图设置-光栅图')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 14: 绘图设置-轨迹图 -->
            <div class="image-card" data-category="plot">
                <div class="image-header">
                    <h2>绘图设置-轨迹图</h2>
                    <span class="frame-num">Frame 14</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 14.png" alt="绘图设置-轨迹图" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 14.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 14.png', 'Frame14-绘图设置-轨迹图')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 15: 反应扩散-区域配置 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>反应扩散-区域配置</h2>
                    <span class="frame-num">Frame 15</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 15.png" alt="反应扩散-区域配置" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 15.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 15.png', 'Frame15-反应扩散-区域配置')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 16: 绘图设置-局部场电位图 -->
            <div class="image-card" data-category="plot">
                <div class="image-header">
                    <h2>绘图设置-局部场电位图</h2>
                    <span class="frame-num">Frame 16</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 16.png" alt="绘图设置-局部场电位图" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 16.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 16.png', 'Frame16-绘图设置-局部场电位图')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 17: 反应扩散-空状态 -->
            <div class="image-card" data-category="other">
                <div class="image-header">
                    <h2>反应扩散-空状态</h2>
                    <span class="frame-num">Frame 17</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 17.png" alt="反应扩散-空状态" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 17.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 17.png', 'Frame17-反应扩散-空状态')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 18: 仿真配置-记录 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-记录</h2>
                    <span class="frame-num">Frame 18</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 18.png" alt="仿真配置-记录" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 18.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 18.png', 'Frame18-仿真配置-记录')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 19: 仿真配置-网络属性 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-网络属性</h2>
                    <span class="frame-num">Frame 19</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 19.png" alt="仿真配置-网络属性" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 19.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 19.png', 'Frame19-仿真配置-网络属性')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 20: 仿真配置-保存配置 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-保存配置</h2>
                    <span class="frame-num">Frame 20</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 20.png" alt="仿真配置-保存配置" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 20.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 20.png', 'Frame20-仿真配置-保存配置')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 21: 仿真配置-网络属性V2 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-网络属性V2</h2>
                    <span class="frame-num">Frame 21</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 21.png" alt="仿真配置-网络属性V2" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 21.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 21.png', 'Frame21-仿真配置-网络属性V2')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 22: 仿真配置-保存配置V2 -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-保存配置V2</h2>
                    <span class="frame-num">Frame 22</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 22.png" alt="仿真配置-保存配置V2" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 22.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 22.png', 'Frame22-仿真配置-保存配置V2')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 23: 导入NeuroML -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>导入NeuroML</h2>
                    <span class="frame-num">Frame 23</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 23.png" alt="导入NeuroML" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 23.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 23.png', 'Frame23-导入NeuroML')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 24: 仿真配置-网络属性(编辑器) -->
            <div class="image-card" data-category="config">
                <div class="image-header">
                    <h2>仿真配置-网络属性(编辑器)</h2>
                    <span class="frame-num">Frame 24</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 24.png" alt="仿真配置-网络属性(编辑器)" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 24.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 24.png', 'Frame24-仿真配置-网络属性(编辑器)')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 25: 实验管理器 -->
            <div class="image-card" data-category="other">
                <div class="image-header">
                    <h2>实验管理器</h2>
                    <span class="frame-num">Frame 25</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 25.png" alt="实验管理器" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 25.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 25.png', 'Frame25-实验管理器')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 26: 选择文件夹对话框 -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>选择文件夹对话框</h2>
                    <span class="frame-num">Frame 26</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 26.png" alt="选择文件夹对话框" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 26.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 26.png', 'Frame26-选择文件夹对话框')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 27: 打开JSON对话框 -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>打开JSON对话框</h2>
                    <span class="frame-num">Frame 27</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 27.png" alt="打开JSON对话框" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 27.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 27.png', 'Frame27-打开JSON对话框')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 28: 保存JSON对话框 -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>保存JSON对话框</h2>
                    <span class="frame-num">Frame 28</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 28.png" alt="保存JSON对话框" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 28.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 28.png', 'Frame28-保存JSON对话框')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 29: 删除确认对话框 -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>删除确认对话框</h2>
                    <span class="frame-num">Frame 29</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 29.png" alt="删除确认对话框" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 29.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 29.png', 'Frame29-删除确认对话框')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 30: 保存JSON对话框(选项) -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>保存JSON对话框(选项)</h2>
                    <span class="frame-num">Frame 30</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 30.png" alt="保存JSON对话框(选项)" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 30.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 30.png', 'Frame30-保存JSON对话框(选项)')">📥 下载</button>
                </div>
            </div>

            <!-- Frame 31: 导入Python对话框 -->
            <div class="image-card" data-category="dialog">
                <div class="image-header">
                    <h2>导入Python对话框</h2>
                    <span class="frame-num">Frame 31</span>
                </div>
                <div class="image-wrapper">
                    <img src="images/Frame 31.png" alt="导入Python对话框" onclick="openModal(this.src)">
                </div>
                <div class="image-actions">
                    <button class="action-btn" onclick="openModal('images/Frame 31.png')">🔍 查看</button>
                    <button class="action-btn secondary" onclick="downloadImage('images/Frame 31.png', 'Frame31-导入Python对话框')">📥 下载</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片放大模态框 -->
    <div id="imageModal" class="modal" onclick="closeModal()">
        <span class="close-modal" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <img id="modalImage" src="" alt="放大图片">
        </div>
    </div>

    <script>
        // 分类过滤功能
        function filterImages(category) {
            const cards = document.querySelectorAll('.image-card');
            const buttons = document.querySelectorAll('.filter-btn');
            let count = 0;

            buttons.forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');

            cards.forEach(card => {
                if (category === 'all' || card.dataset.category === category) {
                    card.style.display = 'block';
                    count++;
                } else {
                    card.style.display = 'none';
                }
            });

            document.getElementById('displayed-count').textContent = count;
        }

        // 打开图片放大模态框
        function openModal(imageSrc) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            modal.style.display = 'block';
            modalImg.src = imageSrc;
            document.body.style.overflow = 'hidden';
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('imageModal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // ESC键关闭模态框
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeModal();
            }
        });

        // 下载图片
        function downloadImage(src, name) {
            const link = document.createElement('a');
            link.href = src;
            link.download = name + '.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
</body>
</html>
